<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   
<script>
$(document).ready(function() 
	    { 
	        $("#listSchoolTab").tablesorter(); 
	    } 
	);
</script>

<script type="text/javascript"> 
    $(document).ready(function() { 
        $('#buttonAddSchool').click(function() { 
            $.blockUI({ message: $('#addSchoolForm'), css: { width: '50%' } }); 
        }); 
       
 
        $('#save').click(function() { 
        	alert('régler le probleme de la validation au niveau de l action: le message d erreur ne s affiche pas');
            //test les champs pour voir s'ils sont vides
        	valid = true;
            if($("#libelleSchool").val() == ""){
            	$("#libelleSchool").next(".error-message").fadeIn().text("remplir le libelle");
            	valid = false;
            } else {
            	$("#libelleSchool").next(".error-message").fadeOut();
            }
            
            if($("#adresse1").val() == "" && $("#adresse2").val() == "" && $("#adresse3").val() == ""){
            	$("#adresse1").next(".error-message").fadeIn().text("remplir l adresse");
            	valid = false;
            } else {
            	$("#adresse1").next(".error-message").fadeOut();
            }
            
            if($("#codePostal").val() == ""){
            	$("#codePostal").next(".error-message").fadeIn().text("remplir le codePostal");
            	valid = false;
            } else {
            	$("#codePostal").next(".error-message").fadeOut();
            }
           
            if($("#ville").val() == ""){
            	$("#ville").next(".error-message").fadeIn().text("remplir la ville");
            	valid = false;
            } else {
            	$("#ville").next(".error-message").fadeOut();
            }
            
            if(valid){
           		$.unblockUI();
            }
            return valid;
        
        });  
 
        $('#cancelButton').click(function() { 
            $.unblockUI(); 
            $("#libelle").val("");
            $("#libelle").next(".error-message").fadeOut();
            $("#adresse1").val("");
            $("#adresse1").next(".error-message").fadeOut();
            $("#adresse3").val("");
            $("#adresse3").next(".error-message").fadeOut();
            $("#adresse2").val("");
            $("#adresse2").next(".error-message").fadeOut();
            $("#codePostal").val("");
            $("#codePostal").next(".error-message").fadeOut();
            $("#ville").val("");
            $("#ville").next(".error-message").fadeOut();
            return false; 
        }); 
        
       
        
        
 
    }); 

    </script> 
	
<h1>School admin</h1>
<h2>liste des écoles</h2>
<table id="listSchoolTab" class="tablesorter">
<thead>
<tr>
<th>id</th><th>libelle</th><th>adresse</th><th>code postal</th><th>ville</th><th>classes</th><th style="size: 30px"></th><th><s:a id="buttonAddSchool" href="#"><img style="width: 20px" src="image/Button-Add-icon.png" /></s:a></th>
</tr>
</thead>
<tbody>
<s:iterator id="schoolList" value="%{#request['listSchools']}" var="schoolBean">
<tr>
<td><s:property value="idEcole"/></td><td><s:property value="libelleSchool"/></td><td><s:property value="adresse"/></td><td><s:property value="codePostal"/></td><td><s:property value="ville"/></td>
<td>
<ul> 
<s:iterator id="classList" value="classes" var="classBean">
	<li><s:property value="libelle"/><a onclick="alert('faire la validation de la suppression')" href="removeClassAdmin.simon?id=${classBean.idClass}"> ... supprimer</a></li>
</s:iterator>
</ul></br>
<form method="post" id="addClassAdminForm" action="addClassAdmin.simon" >
	<input id="libelleClass${schoolBean.idEcole}" name="beanClass.libelle" type="text" />
	<input type="hidden" name="beanClass.schoolId" value="${schoolBean.idEcole}" />
	<input type="submit" onclick="if($('#libelleClass${schoolBean.idEcole}').val() == ''){return false;}return true;" value="Ajouter la classe" id="saveClass${schoolBean.idEcole}"></submit>
</form>
</td>


<td><s:a onclick="alert('faire un appel ajax pour retrouver les données et les afficher dans le formulaire');"><img style="width: 20px" src="image/Button-Upd-icon.png" /></s:a></td><td><a onclick="alert('faire la validation de la suppression')" href="removeSchoolAdmin.simon?id=${schoolBean.idEcole}"><img style="width: 20px" src="image/Button-Supp-icon.png" /></a></td>
</tr>
</s:iterator>

</tbody>
</table>


<div id="addSchoolForm" style="display:none; cursor: default; ">
	 <form method="post" id="addSchoolAdminForm" action="addSchoolAdmin.simon" >
			
			
			<label>libelle</label>
			<input type="text" 	name="beanSchool.libelleSchool" 	size="20"	id="libelleSchool"/>
			<span  class="error-message"></span></br>
			<label>adresse</label>
			<input type="text" 	name="beanSchool.adresse1" 	size="20"	id="adresse1"/>
			<span  class="error-message"></span></br>
			<input type="text" 	name="beanSchool.adresse2" 	size="20"	id="adresse2"/>
			<span  class="error-message"></span></br>
			<input type="text" 	name="beanSchool.adresse3" 	size="20"	id="adresse3"/>
			<span  class="error-message"></span></br>
			<label>code postal</label>
			<input type="text" 	name="beanSchool.codePostal" size="20"	id="codePostal"/>
			<span  class="error-message"></span></br>
			<label>ville</label>
			<input type="text" 	name="beanSchool.ville" 	size="20"	id="ville"/>
			<span  class="error-message"></span></br>
			

			<br/>
			<input type="submit" class="boutonLogin" value="Enregistrer" id="save"></submit>
			<a 		id="cancelButton" 	class="boutonLogin" href="#">Annuler</a>
 
		</form>
		
</div>



    
    